import React, { useState, useEffect } from "react";
import "../index.scss";
import { Skeleton, Empty } from "antd-mobile";
import { queryHomeData2 } from "src/api/home";
import noSubmitIcon from "src/assets/img/node-noSubmit-logo.png";
import processIcon from "src/assets/img/node-process-logo.png";
import successIcon from "src/assets/img/node-process-logo.png";
import { locationShape, historyShape, storeShape } from "src/propType";

const templateNode = [
    {
        label: "测量及现场交桩",
        status: null,
    },
    {
        label: "施工组织报审",
        status: null,
    },
    {
        label: "人机料进场",
        status: null,
    },
    {
        label: "工程开工报审",
        status: null,
    },
];

const getStatusImage = status => {
    switch (status) {
        case 1:
            return successIcon;
        case 0:
            return processIcon;
        case -1:
            return processIcon;
    }
};

const getBoxStyle = {
    1: "item-box-success",
    0: "item-box-process",
    "-1": "item-box-noSubmit",
};

const ProApprovalNode = props => {
    const [nodeList, setNodeList] = useState([]);
    const [loading, setLoading] = useState(false);

    const { store, history } = props;

    const getList = () => {
        setLoading(true);
        queryHomeData2(store.user.userData.projId).then(res => {
            if (res.success) {
                const result = res.data.map(item => {
                    return {
                        departName: item.pactCode,
                        data: getNodeStatus(item),
                    };
                });
                setNodeList(result);
                setLoading(false);
            }
        });
    };

    const getNodeStatus = item => {
        const statusCount = [
            {
                a1: item["a1"],
                a2: item["a2"],
                a3: item["a3"],
            },
            {
                b1: item["b1"],
                b2: item["b2"],
                b3: item["b3"],
            },
            {
                c1: item["c1"],
                c2: item["c2"],
                c3: item["c3"],
            },
            {
                d1: item["d1"],
                d2: item["d2"],
                d3: item["d3"],
            },
        ];
        return templateNode.map((node, index) => {
            return {
                label: node.label,
                status: getStatus(index, statusCount),
            };
        });
    };

    const getStatus = (index, statusCount) => {
        const target = statusCount[index];
        if (index === 0) {
            if (target.a1 === 0 && target.a2 === 0 && target.a3 === 0) return -1;
            if (target.a2 > 0) {
                return 0;
            } else if (target.a3 > 0) {
                return -1;
            } else {
                return 1;
            }
        } else if (index === 1) {
            if (target.b1 === 0 && target.b2 === 0 && target.b3 === 0) return -1;
            if (target.b2 > 0) {
                return 0;
            } else if (target.b3 > 0) {
                return -1;
            } else {
                return 1;
            }
        } else if (index === 2) {
            if (target.c1 === 0 && target.c2 === 0 && target.c3 === 0) return -1;
            if (target.c2 > 0) {
                return 0;
            } else if (target.c3 > 0) {
                return -1;
            } else {
                return 1;
            }
        } else if (index === 3) {
            if (target.d1 === 0 && target.d2 === 0 && target.d3 === 0) return -1;
            if (target.d2 > 0) {
                return 0;
            } else if (target.d3 > 0) {
                return -1;
            } else {
                return 1;
            }
        }
    };

    useEffect(() => {
        getList();
    }, [store.user.userData.projId]);

    const hasData = nodeList?.length;

    return (
        <div className="projApprovalNode">
            {loading ? (
                <Skeleton.Paragraph lineCount={10} animated />
            ) : hasData ? (
                <div className="node-content">
                    {nodeList.map(node => {
                        return (
                            <div className="node-item c-w100 c-ai_c" key={node.departName}>
                                <span className="node-title">{node.departName}</span>
                                <div className="c-flex item-content">
                                    {node.data.map((subItem, index) => {
                                        return (
                                            <div
                                                className={`item-box c-ai_c ${
                                                    getBoxStyle[subItem.status]
                                                }`}
                                                key={index}
                                            >
                                                <span
                                                    className={`node-name ${
                                                        !index ? "first-node" : ""
                                                    }`}
                                                >
                                                    {subItem.label}
                                                </span>
                                                {index === node.data.length - 1 &&
                                                    subItem.status === 1 && (
                                                        <img src={noSubmitIcon} />
                                                    )}
                                                {index !== node.data.length - 1 && (
                                                    <img src={getStatusImage(subItem.status)} />
                                                )}
                                            </div>
                                        );
                                    })}
                                </div>
                            </div>
                        );
                    })}
                </div>
            ) : (
                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
            )}
        </div>
    );
};

ProApprovalNode.propTypes = {
    history: historyShape,
    location: locationShape,
    store: storeShape,
};

export default ProApprovalNode;
